<template>
  <view class="content">
    <view class="fiex-sos" :style="{ backgroundColor: bgColor }">
      <u-navbar :placeholder="true" :safeAreaInsetTop="true" bgColor="transparent">
       <view class="nav" slot="left">
          <view class="dizi" @click="addressbtn">
            <text class="iconfont icon-address"></text>
            <view class="text">{{address}}</view>
            <text class="iconfont icon-xiala"></text>
          </view>
          </view>
      </u-navbar>
      <view class="search">
        <view class="search_icon">
          <u-icon name="search" color="#000" size="16"></u-icon>
        </view>
        <input class="uni-input" disabled placeholder="请输入商品名称" @click="searchbtn" />
        <button class="sous" @click="searchbtn">搜索</button>
      </view>
    </view>
    <view class="herder" :style="{'background-image': 'url(' + bgiurl + ')'}">
      <view class="uniswiper">
        <u-swiper :list="advertlist" indicator indicatorMode="line" circular height="220" radius="5"
          bgColor="transparent" @change="bgimage"></u-swiper>
      </view>
    </view>
    <view class="module">
		<u-scroll-list class="inde_scroll" :indicator="false">
		 <view class="scroll-list">
		  <view class="scrollt_box_1">
		  <navigator hover-class="none" class="food box" url="../../page_detailsbtn/index/index?id=1">迷彩餐饮</navigator>
		  <navigator hover-class="none" class="fresh box" url="../../page_fresh/fresh_index/index">迷彩生鲜</navigator>
		  <view class="fresh box" @click="toast">家电家居</view>
		  <view class="food box" @click="toast">电子数码</view>
		  <view class="fresh box" @click="toast">迷彩跑腿</view>
		  </view>
		  <view class="scrollt_box_1">
		  <view class="fresh box" @click="toast">建材物料</view>
		  <view class="food box" @click="toast">旧物回收</view>
		  <view class="fresh box" @click="toast">家政服务</view>
		  <view class="food box" @click="toast">婚庆服务</view>
		  <view class="fresh box" @click="toast">维修服务</view>
		  </view>
		  </view>
		</u-scroll-list>
    </view>
    <view class="tbas" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
      <u-tabs :list="list1" lineColor="transparent" :activeStyle="{
				 fontWeight: 'bold',
				 fontSize:'34rpx'
		}" @click="switchfn" :current="mark"></u-tabs>
      <view class="catlist">
        <view class="Hot-box" lazy-load v-show="mark === 0">
          <CommoDity :productlist="productlist"></CommoDity>
        </view>
        <view style="margin: 0 20rpx;" lazy-load v-show="mark === 1">
          <view class="boxlist" @click="detailsbtn" v-for="item in storelist" :key="item.id" :data-id="item.id">
            <view class="left">
              <image :src="item.logo"></image>
            </view>
            <view class="rigth">
              <text style="font-size: 34rpx;">{{item.name}}</text>
              <view class="xinxin">
                <text class="graed">4.8分</text>
                <text class="number">月售{{item.sales_num}}+</text>
              </view>
              <view class="footer">
                <view class="btn">起送 ￥{{Number(item.send_price).toFixed(0)}}</view>
                <view class="btn">配送 ￥4</view>
                <view class="btn">47分钟</view>
                <view class="btn">4.5km</view>
              </view>
            </view>
          </view>
        </view>
      </view>
	  <u-loadmore :status="status" marginBottom="10rpx"/>
    </view>
    <u-popup :show="contactPopup" mode="center" @close="close" @open="open" :round="10">
      <view class="popup">
        <view class="con_popup">
          <text class="mb10">目前仅支持微信群/电话下单,</text>
          <text class="mb10">请添加微信或者打电话</text>
          <image class="qrcode" src="https://xixijj.oss-cn-chengdu.aliyuncs.com/attach/2023/09/220ec202309281431288531.png" @longpress="saveImageToAlbum"></image>
          <text class="mt10">17775599966微信同号</text>
        </view>
        <view class="close" @click="close">
          <u-icon name="close" color="#000" size="22"></u-icon>
        </view>
      </view>
    </u-popup>
    <view class="con_phone" @click="phonebtn">
      <u-icon name="phone" color="#000" size="26"></u-icon>
    </view>
    <u-back-top :scroll-top="scrollTop" bottom="10" z-index="9999"
      :customStyle="{backgroundColor:'#fff',boxShadow: '2px 2px 12px 2px #e1e1e1'}" :iconStyle="{color:'#000'}" duration="1000"></u-back-top>
    <FooterNavigation></FooterNavigation>
  </view>
</template>

<script>
  import CommoDity from '@/components/commodity.vue'
  import qqmap from '../../utils/qqmap.js'
  import http from '@/utils/http.js'
  import {
    getproduct
  } from '@/api/commodity.js'
  import {
    advert
  } from '@/api/protocol.js'
  export default {
    components: {
      CommoDity
    },
    data() {
      return {
        bgiurl: '',
        address: '内江市',
        mark: 0,
        productlist: [],
        formprod: {
          page: 1,
          limit: 10
        },
        scrollTop: 0,
        status: 'loadmore',
        count: null,
        advertlist: [],
        storelist: [],
        list1: [{
            name: '热门商品'
          },
          {
            name: '热门商家'
          }
        ],
        startX: null,
        deltaX: 0,
        bgColor: 'rgba(255, 255, 255, 0)', // 初始背景透明
        contactPopup: true,

      }
    },
    methods: {
      toast() {
        uni.showToast({
          title: '暂未开放',
          icon: 'none'
        });
      },
      open() {
        
      },
      close() {
        this.contactPopup = false
      },
      saveImageToAlbum() {
        uni.saveImageToPhotosAlbum({
          filePath: '/static/qrcode.png',
          success() {
            uni.showToast({
              title: '保存成功',
              icon: 'success'
            });
          },
          fail() {
            uni.showToast({
              title: '保存失败',
              icon: 'none'
            });
          }
        });
      },
      //拨打电话
      phonebtn() {
        uni.makePhoneCall({
          phoneNumber: '177-7559-9966'
        });
      },
      position() {
        uni.getLocation({
		  type:'gcj02',
          isHighAccuracy: true,
		  altitude:true,
          success: (res) => {
            this.lat = res.latitude
            this.lng = res.longitude
            qqmap.reverseGeocoder({
              location: {
                latitude: this.lat,
                longitude: this.lng
              },
              success: (res) => {
                this.address = res.result.address
                getApp().globalData.addressmini = res.result.address_component.city
              },
              fail: (error) => {
                console.error(error);
              },
            })
          },
          fail: (error) => {
            console.log('获取位置信息失败：', error);
          }
        })
      },
      touchStart(el) {
        // 记录触摸起始点的横坐标
        this.startX = el.touches[0].clientX;
      },
      touchMove(event) {
        // 计算滑动距离
        const currentX = event.touches[0].clientX;
        this.deltaX = currentX - this.startX;
      },
      touchEnd() {
        if (this.deltaX > 120) {
          //右滑
          this.mark = 0
        } else if (this.deltaX < -120) {
          this.mark = 1
        }
        this.startX = null
        this.deltaX = 0
      },
      bgimage(el) {
        this.bgiurl = this.advertlist[el.current]
      },
      renew() {
        if (this.count > this.productlist.length) {
          this.status = 'loading'
          this.formprod.page++
          this.productapi(this.formprod)
        } else {
          this.status = 'nomore'
        }
      },
      searchbtn() {
        uni.navigateTo({
          url: '/page_search/index'
        })
      },
      switchfn(el) {
        this.mark = el.index
      },
      detailsbtn(e) {
        const id = e.currentTarget.dataset.id
        uni.navigateTo({
          url: '/page_detailsbtn/index/index?id=' + id
        })
      },
      addressbtn() {
        uni.navigateTo({
          url: '/page_my/my-address/selectaddress'
        })
      },
      async advertapi() {
        const res = await advert(1)
        res.data.forEach(el => this.advertlist.push(el.image))
        this.bgiurl = res.data[0].image
      },
      async storeapi() {
        const res = await http({
          url: '/store'
        })
        this.storelist = res.data
      },
      async productapi(datas) {
        const res = await getproduct(datas)
        this.productlist.push(...res.data.list)
        this.count = res.data.count
        this.count > this.productlist.length ? this.status = 'loadmore' : this.status = 'nomore'
		this.status = 'loadmore'
      },
    },
    onPageScroll(el) {
      const windowHeight = uni.getSystemInfoSync().windowHeight;
      this.scrollTop = el.scrollTop;
      const opacity = Math.min(this.scrollTop / 100, 1); // 根据滑动距离计算透明度
      this.bgColor = `rgba(255, 255, 255, ${opacity})`; // 根据透明度设置背景颜色
      uni.createSelectorQuery().selectViewport().scrollOffset((res) => {
      const scrollHeight = res.scrollHeight; // 获取页面总高度
        if (this.scrollTop + windowHeight >= scrollHeight-10) {
			this.renew()
        }
      }).exec();
    },
    onShow() {
      this.$bus.$on('homepost', params => {
        this.address = params.param
      })
    },
    onLoad() {
      this.position()
      this.advertapi()
      this.storeapi()
      this.productapi(this.formprod)
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fafafa;
  }
  .icon-address {
    font-size: 36rpx;
  }
   .content{
		position: relative;
	}
  .fiex-sos {
    box-sizing: border-box;
    position: fixed;
    padding: 0rpx 20rpx 20rpx 20rpx;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    .dizi {
      display: flex;
      align-items: center;
    }

    .dizi .text {
      font-size: 26rpx;
      margin: 0 8rpx;
    }

    .search {
      position: relative;
      display: flex;
      align-items: center;
      // margin-top: 25rpx;
      z-index: 99;

      .search_icon {
        position: absolute;
        left: 20rpx;
      }

      .uni-input {
        background-color: #fafafa;
        height: 68rpx;
        border-radius: 50rpx;
        width: 100%;
        font-size: 24rpx;
        padding: 0rpx 50rpx;
      }

      .sous {
        position: absolute;
        border-radius: 50rpx;
        right: 0;
        height: 68rpx;
        width: 140rpx;
        line-height: 68rpx;
        text-align: center;
        font-size: 24rpx;
        color: white;
        background-color: #095907;
      }
    }
  }

  .herder {
    position: relative;
    height: 680rpx;
    padding: 120rpx 20rpx 0 20rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      backdrop-filter: blur(10rpx);
      background-color: transparent;
      z-index: 1;
    }
  }

  .module {
	box-sizing: border-box;
    position: absolute;
    transform: translateY(-40%);
    padding: 0 20rpx;
	width: 100%;
    z-index: 99;
	.u-scroll-list.data-v-e2a26316{
		padding-bottom: 0;
	}
	.scroll-list{
		display: flex;
		flex-direction: column;
	}
	.scrollt_box_1{
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		&:last-child {
		   margin-bottom: 0;
		}
	}
    .box {
      width: 200rpx;
      height: 120rpx;
      padding-bottom: 16rpx;
      background-color: #fff;
      border-radius: 20rpx;
      font-size: 30rpx;
      color: #fff;
	  margin-right: 30rpx;
      display: flex;
      align-items: flex-end;
      justify-content: center;
	  &:last-child {
	         margin-right: 0;
	      }
    }

    .food {
      background: linear-gradient(to bottom right,
          #4b54ab 40%,
          /* 红色从0%开始 */
          #b57197 70%,
          /* 绿色从50%开始 */
          #e5996f 100%
          /* 蓝色从100%结束 */
        )
    }

    .fresh {
      background: linear-gradient(to bottom right,
          #36bba6 40%,
          /* 红色从0%开始 */
          #e5ec98 80%,
          /* 绿色从50%开始 */
          #f08c19 100%
          /* 蓝色从100%结束 */
        )
    }
  }
  .tbas{
	  margin-top: 180rpx;
  }
  .uniswiper {
    position: relative;
    margin: 0 auto;
    margin-top: 160rpx;
    z-index: 99;

    .swiper-item {
      text-align: center;

      image {
        border-radius: 20rpx;
        height: 260rpx;
      }
    }
  }

  .catlist {
    .Hot-box {
      padding: 0 40rpx;
    }

    .boxlist {
      display: flex;
      padding: 20rpx 0 20rpx 10rpx;
      background-color: #fff;
      border-radius: 30rpx;
      margin-top: 20rpx;

      &:last-child {
        margin-bottom: 50rpx;
      }

      .left {
        margin-right: 30rpx;

        image {
          width: 160rpx;
          height: 160rpx;
        }
      }

      .rigth {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 26rpx;

        .xinxin {
          .graed {
            font-size: 28rpx;
            color: #f08c19;
            margin-right: 50rpx;
          }

          .number {
            color: #999999;
            margin-left: 10rpx;
          }
        }

        .footer {
          display: flex;
          color: #999999;

          .btn {
            margin-right: 24rpx;
          }
        }
      }
    }
  }

  .popup {
    position: relative;

    .con_popup {
      padding: 30rpx;
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 600rpx;

      .mb10 {
        margin-bottom: 10rpx;
      }

      .mt10 {
        margin-top: 10rpx;
      }

      .qrcode {
        width: 80%;
        margin: 10rpx 0;
      }
    }

    .close {
      position: absolute;
      bottom: -100rpx;
      left: 45%;
      border-radius: 50rpx;
      background-color: #fff;
      padding: 20rpx;
    }
  }

  .con_phone {
    z-index: 9999;
    bottom: 60px;
    right: 20px;
    width: 38px;
    height: 38px;
    position: fixed;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    // border: 1px solid #e1e1e1;
    box-shadow: 2px 2px 12px 2px #e1e1e1;
  }

  .u-safe-area-inset-bottom {
    padding-bottom: 0 !important;
  }
</style>